import { Meta } from '@storybook/addon-docs/blocks';
import * as story from './Wires.stories';

<Meta of={story} />

# Wires

## Edge-to-edge connections

We store the point where the mouse was released in the terminal points of the edge geometry
and use that point to find the nearest segment on the target edge
and the connection point between the two edges in `GraphView.updateFixedTerminalPoint`.


## Orthogonal router

The orthogonal router, which is implemented as an edge style,
computes its result based on the output of `GraphView.updateFixedTerminalPoint`,
which computes all connection points for edge-to-edge connections
and constrained ports and vertices and stores them in `State.absolutePoints`.


## Routing directions

Routing directions are stored in the 'portConstraint' style.
Possible values for this style are "horizontal" and "vertical".
Note that this may have other values depending on the edge style.

For edge-to-edge connections, a 'source-/targetConstraint' style is added in `GraphView.updateFixedTerminalPoint` that contains the
orientation of the segment that the edge connects to.
Possible values are "horizontal" and "vertical".


## Alternative solution for connection points

An alternative solution for connection points via connection constraints is demonstrated.
In this setup, the edge is connected to the parent cell directly.
There are no child cells that act as "ports".
Instead, the connection information is stored as a relative point in the connecting edge.
See also the `PortRefs` story for storing references to ports.
